﻿$(document).ready(function() {
    var currentIndex = 0;
    var objDemo; //函数对象
    var currentID = ""; //取得鼠标下方的对象ID
    var pictureID = 0;  //索引ID
    $(".picturebig").eq(0).show(); //默认
    autoScroll();
    $(".picturesmal").hover(function() {
        StopScrolll();
        $(".picturesmal").removeClass("current")//所有的li去掉当前的样式加上正常的样式
        $(this).addClass("current"); //而本身则加上当前的样式去掉正常的样式
        currentID = $(this).attr("id"); //取当前元素的ID
        pictureID = parseInt(currentID.substring(currentID.length - 1)); //取最后一个字符
        currentIndex = pictureID;
$(".picturebig").eq(pictureID).fadeIn("slow"); //本身显示
        $(".picturebig").not($(".picturebig")[pictureID]).hide(); //除了自身别的全部隐藏
        
    }, function() {
        //当鼠标离开对象的时候获得当前的对象的ID以便能在启动自动时与其同步
        currentID = $(this).attr("id"); //取当前元素的ID
        pictureID = parseInt(currentID.substring(currentID.length - 1)); //取最后一个字符
        currentIndex = pictureID;
        autoScroll();
    });
    //自动滚动
    function autoScroll() {
        $(".picturesmal").eq(currentIndex).addClass("current");
        $(".picturesmal").eq(currentIndex - 1).removeClass("current");
        $(".picturebig").eq(currentIndex).fadeIn("slow");

        if (currentIndex == 0) {
            $(".picturebig").eq(2).hide();
        }
        else {
            $(".picturebig").eq(currentIndex - 1).hide();
        }
        currentIndex++;
        currentIndex = currentIndex >= 3 ? 0 : currentIndex;
        objDemo = setTimeout(autoScroll, 2500);
    }
    //当鼠标移动到对象上面的时候停止自动滚动
    function StopScrolll() {
        clearTimeout(objDemo);
    }
});